@import "@/common/styles/colors"

.welcome-banner
  width: 30rem
  display: flex
  flex-direction: column
  justify-content: space-between
  user-select: none

  .welcome-inner
    height: 100%

  .welcome-actions
    display: flex
    justify-content: space-between
    align-items: center
    margin-top: 1rem

    h3
      margin: 0
      font-size: 14pt
      color: $subtext

    .dialog-btn
      padding: 0.4rem 1.3rem
      border-radius: 0.6rem

  .slide-in
    animation: slide-in 0.5s forwards

@keyframes slide-in
  from
    opacity: 0
    transform: translateX(10%) rotate(10deg) scale(0.5)
  to
    opacity: 1
    transform: translateX(0)


@media screen and (max-width: 600px)
  .welcome-banner
    width: 100%

  .slide-in
    animation: slide-in 0.5s forwards